import React,{Component} from 'react';
import {Form, Input,DatePicker,Select,Modal,message} from 'antd';
import $ from 'jquery';
import history from '../history';
require('./CreateUser.css');
const { Option } = Select;
const FormItem = Form.Item;
class CreateUser extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          modal: false,
          hints: {},
          data:{},
          validRules: [],
        };
      }

    showModal = () => {
      this.setState({
        visible: true,
      });
    }
  
    hideModal = () => {
      this.setState({
        visible: false,
      });
    }

    save =() => {
        var demo=this.props.form;
        demo.validateFields((err, values) => {
            $.ajax({
              type: "POST",
              url: "http://localhost:8008/user/save",
              dataType: "json",
              contentType:"application/json",
              data:JSON.stringify(values),
              success: () => {
                  message.success('增加成功!')
                  this.setState({
                      visible:false
                  })
                  this.props.fetch();
              }
            });
        });
    }
   

    //保存操作
    handleOk = (e) => {
        var demo = this.props.form;
        demo.validateFields((err,values) => {
            $.ajax({
                url: 'http://localhost:8008/user/check',
                dataType: "json",
                contentType:"application/json",
                data: JSON.stringify(values.userName),
                method: 'POST',
                success: data => {
                  if(data === true){
                    message.error("用户名被占用");
                    this.setState({
                        visible:true
                    })
                  }else{
                      this.save();
                  }
                },
                error: () => {
                    message.error('服务器错误!')
                }
            });
        });
        // window.location.reload()
      }
    
      //取消操作
      handleCancel = (e) => {
        this.setState({
          visible: false,
        });  
      }

      inputOnBlur = ()=>{
        this.setState({ 
            
        })
        var demo = this.props.form;
        demo.validateFields((err,values) => {
            $.ajax({
                url: 'http://localhost:8008/user/check',
                dataType: "json",
                contentType:"application/json",
                data: JSON.stringify(values.userName),
                method: 'POST',
                success: data => {
                  if(data === true){
                    message.error("用户名被占用");
                    this.setState({
                        visible:true
                    })
                  }
                },
                error: () => {
                    message.error('服务器错误!')
                }
            });
        });
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div>
                 <Modal
                    title="添加用户"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                <Form layout="vertical">

                    <FormItem label="用户名" className="formitem">
                    {getFieldDecorator('userName', {
                        rules: [{ required: true, message: '请输入用户名!' }],
                    })(
                        <Input className="inputk" autoComplete="off" 
                        // onBlur={this.inputOnBlur}
                        />
                    )}
                    </FormItem>

                    <FormItem label="密码" className="formitem">
                    {getFieldDecorator('passwd', {
                        rules: [{ required: true, message: '请输入密码!' }],
                    })(
                        <Input.Password className="inputk" placeholder="input passwd"/>
                    )}
                    </FormItem>

                    <FormItem label="邮箱" className="formitem">
                    {getFieldDecorator('email', {
                    rules: [{ required: true, message: '请输入邮箱!' }],
                    })(
                        <Input className="inputk" type="textarea" autoComplete="off"/>
                    )}
                    </FormItem>

                    <FormItem label="手机号" className="formitem">
                    {getFieldDecorator('phonenumber', {
                    rules: [{ required: true, message: '请输入手机号!' }],
                    })(
                        <Input className="inputk" type="textarea" autoComplete="off"/>
                    )}
                    </FormItem>

                    <FormItem label="微信号" className="formitem">
                    {getFieldDecorator('wechat', {
                    rules: [{ required: true, message: '请输入微信号!' }],
                    })(
                        <Input className="inputk" type="textarea" autoComplete="off"/>
                    )}
                    </FormItem>

                    <FormItem label="角色" className="formitem">
                    {getFieldDecorator('roleid', {
                    rules: [{ required: true, message: '请输入角色!' }],
                    })(
                        <Select
                        placeholder="--请选择--"
                        onChange={this.handleSelectChange}
                        style={{width:300}}
                        >
                        <Option value="管理员">管理员</Option>
                        <Option value="用户">用户</Option>
                        </Select>
                    )}
                    </FormItem>

                    <FormItem label="创建日期" className="formitem">
                    {getFieldDecorator('createtime', {
                    rules: [{ required: true, message: '请输入日期!' }],
                    })(
                        <DatePicker className="inputk"/>
                    )}
                    </FormItem>

                </Form>
                </Modal> 
            </div>
        )
    }

}

const LoginForm = Form.create({withRef: true})(CreateUser);

export default LoginForm;